<template>
	<view>
		<view class="active_box">
			<view class="active_title">最新社区公告</view>
			<view class="active_list">
	
				<block v-if="notices.length > 1">
					<view class="cu-list menu" v-for="(notice, idx) in notices" style="border-radius: 20rpx" :key="idx" :data-item="notice">
						<view class="cu-item arrow_bg">
							<view class="content padding-tb-sm">
								<view>
									<text class="cuIcon-notification text-cut margin-right-xs" style="color: #faebcd;"></text>
									<view class="text-cut" style="width:220px;font-weight: 600;color: white;">{{notice.title}}</view>
								</view>
								<view class="text-gray text-sm">
									<text class="margin-right-xs">发布时间：</text> {{notice.startTime}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="cu-list menu">
						<view class="cu-item">
							<view class="content">
								<view class="content_pic">
									<img src="../../static/notice_pic.png" alt="">
								</view>
								<text class="text-grey" style="text-align: center;display: block;margin-top: 14rpx;">暂无公告信息</text>
							</view>
						</view>
					</view>
				</block>
				
			</view>

		</view>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	export default {
		name: "indexNotice",
		data() {
			return {
				communityId: "",
				currPageIndex: 0,
				pageSize: 10,
				page: 1,
				notices: [],
			};
		},
		created() {
			this._loadNotices();
		},
		methods:{
			_loadNotices: function(){
				let that = this;
				let _plotNum = uni.getStorageSync("_selectCommunity");
				that.communityId = _plotNum.id
				
				that.loadingStatus = 'more';
				
				uni.request({
					header: context.getHeaders(),
					url: constant.url.GetNoticeListUrl,
					method: "GET",
					data: {
						communityId:that.communityId,
					},
					success: function(res) {
						// TODO 判断
						// that.notices = res.data.result
						that.notices = that.notices.concat(res.data.result);
						that.notices = that.notices.slice(0,3)
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.active_box {
		background-color: #191b1f;
		padding: 0 20upx;
		padding-bottom: 20upx;

		.active_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 0;
			font-size: 30upx;
			color: #fff;
			font-weight: 600;

			.more {
				font-size: 24upx;
				font-weight: 400;
				color: #999;
				
			}
		}

		.active_list {
			border-radius: 5rpx;
		}

		.active_empty {
			background: #141212;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 100rpx 0;
			border-radius: 10px;

			image {
				width: 50%;
				height: 200upx;
			}

			.text {
				font-size: 28rpx;
				color: #333;
				margin-top: 20rpx;
			}
		}

		.active_item {
			display: inline-block;
			padding: 20upx;
			width: 20%;
			text-align: center;
			font-size: 28upx;

			image {
				height: 64upx;
				width: 64upx;
			}

			.text {
				white-space: nowrap;
				font-size: 20upx;
				font-weight: 400;
			}
		}

		.home_item:last-child {
			margin-right: 0;
		}
	}
	
	
	.noticesList-list{
	  font-size: 25rpx;
	  display: flex;
	  width: 100%;
	  padding: 10rpx 0;   
	  border-bottom: 1rpx solid #ECECEC;
	  color: #6D6D6D;
	  justify-content: space-between;
	}
	.notices-info-name{
	  margin-top: 10rpx;
	  color: black;
	  font-size: 30rpx;
	  display: -webkit-box;  /*设置为弹性盒子*/
	  -webkit-line-clamp: 2;  /*最多显示5行*/
	  overflow: hidden;  /*超出隐藏*/
	  text-overflow: ellipsis;  /*超出显示为省略号*/
	  -webkit-box-orient: vertical;
	  word-break: break-all;  /*强制英文单词自动换行*/
	}
	.notices-info-image image{
	  width: 200rpx;
	  height: 150rpx;
	  margin: 10rpx 20rpx 0rpx 20rpx;
	  border-radius: 10rpx;
	}
	.notices-info{
	  margin: 10rpx 0rpx 0rpx 20rpx;
	  height: 150rpx;
	  flex-direction: column;
	  display: flex;
	  justify-content: space-between;
	}
	.notice-bottom{
	  display: flex;
	  text-align: left;
	}
	.notice-bottom view{
	  margin-right: 20rpx;
	}
	
	.notice-bottom icon{
	  color: #8a8a8a;
	  display: inline-block;
	  width: 40rpx;
	  height: 40rpx;
	}
	.notice-bottom view text{
	  font-size: 25rpx;
	  line-height: 40rpx;
	}
	/deep/ .cu-list.menu>.cu-item {
    position: relative;
    display: flex;
    padding: 50rpx  30rpx;
    min-height: 100rpx;
    background-color: #ffffff;
    justify-content: space-between;
    align-items: center;
}
.content_pic{
	text-align: center;
	width:220rpx;
	height: 220rpx;
	margin: auto;
	img{
		width: 100%;
		height: 100%;
	}
}
</style>
